<template>
  <div class="login">
    <p class="title animate__animated animate__flip" v-if="page=='login'">开启完美的一天</p>
    <p class="title animate__animated animate__flip" v-else-if="page=='register'">欢迎加入Mivn</p>
    <p class="title animate__animated animate__flip" v-else-if="page=='forget'">请先验证您的身份</p>
    <p class="title animate__animated animate__flip" v-else-if="page=='ReplacePassword'">请重置密码</p>
    <login  v-if="page=='login'" @skipto="Skip"/>
    <register v-else-if="page=='register'" @skipto="Skip"/>
    <forget  v-else-if="page=='forget'" @skipto="Skip"/>
    <replace-password  v-else-if="page=='ReplacePassword'" @skipto="Skip"/>
    <p v-else class="animate__animated animate__bounceInLeft">跳转异常，请重新进入</p>
  </div>
</template>

<script setup>
import Login from '@/views/login/components/Login.vue';
import Register from '@/views/login/components/Register.vue';
import Forget from '@/views/login/components/Forget.vue';
import ReplacePassword from '@/views/login/components/ReplacePassword.vue';
import { ref } from 'vue';

const page  = ref("login")
const Skip = (newpage) => {  
  page.value = newpage
}
</script>
<style lang="scss" scoped>
.login {
  background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120px;
    .title {
      margin-top: 70px;
      font-size: 32px;
      letter-spacing: 2px;
      color: #fff;
      font-family:'快乐体' ;
    }
    .login-main {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      padding: 20px;
      width: 90%;
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(10px);
      border-radius: 24px;
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
      :deep(.van-field__left-icon) {
        color: #72bddb;
      }
      :deep(.login-button) {
        background: #72bddb;
        margin-top: 20px;
        width: 70vw;
        border-radius: 15px;
        border: none;
      }
      :deep(.van-cell-group){
        width: 80vw;
      }
      .line-box {
          width: 100%;
					display: flex;
					align-items: center;
					margin: 20px 0px;

					.line {
						flex: 1;
						height: 2px;
						background: rgba(0, 0, 0, 0.1);
					}

					.line-text {
						padding: 0 10px;
						color: #999;
						font-size: 14px
					}
				}

        .footer {
          font-size: 14px;
          color: #999;

          .register {
            color: #72bddb;
          }
        }
    }

}


::v-deep.van-cell-group {
  background-color: transparent;
}
::v-deep.van-cell {
  background-color:transparent;
}

</style>